<template>
  <div class="echartsBox">
    <div id="main" style="width: 100%; height: 150px" ref="main"></div>
    <div class="zeroText">0</div>
  </div>
</template>
<script>
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {
    Color: {
      type: String,
      default: "#3282E4",
    },
    title: {
      type: String,
      default: "",
    },
    x: {
      type: Array,
      default: [],
    },
    y: {
      type: Array,
      default: [],
    },
    y2: {
      type: Array,
     default: () => {},
    },
  },
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {};
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {
    this.getEchartData();
  },
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    getEchartData() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      // let myChart = this.$echarts.init(document.getElementById("main"));
      let myChart = this.$echarts.init(this.$refs.main);
      var DataName = ["", this.title];
      var DataA = this.y;
      var DataB = this.y2;

      var DataDM = this.x;
      // 指定图表的配置项和数据
      let option = {
        // backgroundColor: "#344b58",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            textStyle: {
              color: "#fff",
            },
          },
          //formatter: '{b}<br />{a}: {c}人',
          //backgroundColor: 'rgba(0,0,0,0.7)', //提示背景
        },
        grid: {
          top: "17%",
          left: "7%",
          right: "7%",
          bottom: "20%",
        },

        legend: {
          align: "left",
          left: "5%",
          top: "-19%",
          textStyle: {
            color: "#666",
            fontSize: 12,
          },
          icon: "roundRect",
          itemGap: 25,
          itemWidth: 17,
          itemHeight: 10,

          data: DataName,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#888888",
                width: 1,
              },
              symbol: ["none", "arrow"], // 只在末端显示箭头
              symbolSize: [7, 9],
              symbolOffset: [0, 0],
            },
            axisLabel: {
              textStyle: {
                color: "#666",
                padding: [10, 0, 0, 0],
                fontSize: 12,
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: true,
            },
            data: DataDM,
          },
        ],
        yAxis: [
          {
            name: "",
            nameTextStyle: {
              color: "#666",
              fontSize: 12,
              padding: [0, 0, 0, 0],
              lineHeight: 40,
            },
            min: 0,
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(200,200,200,.5)",
                type: "dashed",
                width: 0.5,
              },
            },
            axisLine: {
              show: true, //这个是需要主动添加上去的，默认是false
              symbol: ["none", "arrow"], // 只在末端显示箭头
              symbolSize: [7, 9],
              symbolOffset: [0, 5],
              lineStyle: {
                color: "#888888",
                width: 0.7,
              },
            },

            axisLabel: {
              show: false,
              textStyle: {
                color: "#666",
                padding: 6,
                fontSize: 12,
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: DataName[1],
            type: "line",
            showAllSymbol: true,
            symbolSize: 6,
            symbol: "circle",
            smooth: false,
            lineStyle: {
              normal: {
                width: 2,
                color: this.Color,
              },
              borderColor: "rgba(0,0,0,.4)",
            },
            itemStyle: {
              color: this.Color,
            },
            tooltip: {
              show: true,
            },
            data: DataA,
          },
          {
            name: DataName[1],
            type: "line",
            showAllSymbol: true,
            symbolSize: 6,
            symbol: "circle",
            smooth: false,
            lineStyle: {
              normal: {
                width: 2,
                color: "#E3812B",
              },
              borderColor: "rgba(0,0,0,.4)",
            },
            itemStyle: {
              color: "#E3812B",
            },
            tooltip: {
              show: true,
            },
            data: DataB,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped lang="scss">
.chart {
  width: 100%;
  height: 100%;
}
.echartsBox {
  position: relative;
}
.zeroText {
  font-size: 12px;
  color: #656565;
  position: absolute;
  bottom: 25px;
  left: 13px;
}
</style>
